<template>
    <div class="left-tree">
        <el-input class="filter-input" placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <!-- show-checkbox -->
        <el-tree :data="treeData" :default-checked-keys="checkedTreeNodes" default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"
            :filter-node-method="filterNode" @node-click="handleCheckChange" @check="handleCheckChange">
        </el-tree>
    </div>
</template>
<script>
import { getDrinkingWaterSegmentTree, getDrinkingWaterSourceList } from '../api/informationApi.js';
export default {
    name: 'LeftTree',
    props: {
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },

    },
    data() {
        return {
            filterText: "",
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            checkedTreeNodes: [],
        };
    },
    created() {
        this.query()
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        query() {
            this.getDrinkTree()
        },
        getDrinkTree() {
            getDrinkingWaterSourceList().then(res => {
                if (res.code == 200) {
                    let menuList = res.rows || []
                    menuList.push({
                        id: '0',
                        pId: '0',
                        drinksourcename: '水源地'
                    })

                    this.treeData = this.convertToTree(menuList || []);
                    try {
                        let node = this.treeData[0].children[0]
                        this.checkedTreeNodes = [node.id]
                        this.handleCheckChange(node)
                    } catch (error) {
                        console.log(error)
                    }
                    
                }
            });
        },

        convertToTree(list) {
            // 创建一个映射表，用于快速查找节点
            const map = {};
            const treeData = [];

            // 初始化所有节点
            list.forEach(item => {
                map[item.id] = {
                    id: item.id,
                    label: item.drinksourcename,
                    ...item,
                    children: []
                };
            });

            // 构建树形结构
            list.forEach(item => {
                const node = map[item.id];
                if (item.pId === '0') {
                    // 根节点
                    treeData.push(node);
                } else {
                    // 子节点
                    const parent = map[0];
                    if (parent) {
                        parent.children.push(node);
                    }
                }
            });

            return treeData;
        },
        handleCheckChange(data, checked) {
            if (data.children && data.children.length > 0) return
            // 获取所有选中的节点
            const checkedNodes = this.$refs.tree.getCheckedNodes();
            // 发送给父组件
            this.$emit('tree-check-change', data);
        },
    }
}
</script>
<style scoped>
.filter-input {
    margin-bottom: 10px;
}
</style>